<template>
  <div class="header">
    <div class="collapse-btn" @click="collapseChange">
      <i class="el-icon-menu"></i>
    </div>
    <div class="logo">
      音乐后台管理系统
    </div>
    <div class="header-right">
      <div class="btn-fullscreen" @click="handleFullScreen">
        <el-tooltip class="item" effect="dark" :content="fullscreen ? '取消全屏' : '全屏'" placement="bottom">
          <i class="el-icon-rank"></i>
        </el-tooltip>
      </div>
      <div class="user-avator">
        <img src="../assets/img/user.jpg" />
      </div>
      <el-dropdown
        class="username"
        trigger="click"
        @command="handCommand"
        >
        <span class="el-dropdown-link">
          {{ userName }}
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="logoOut">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import bus from "../assets/js/bus";
export default {
  name:"TheHeader",
  data() {
    return {
      collapse:false,
      fullscreen:false
    }
  },
  computed:{
    userName(){
      return localStorage.getItem("userName")
    }
  },
  created() {

  },
  methods: {
    //侧边栏折叠
    collapseChange(){
      this.collapse = !this.collapse;
      bus.$emit('collapse',this.collapse);
    },
    handleFullScreen(){
      if(this.fullscreen){
        if(document.exitFullscreen){
          document.exitFullscreen();
        }else if(document.webkitCancelFullScreen){      //safari 、Chrome
          document.webkitCancelFullScreen();
        }else if (document.mozCancelFullScreen){        //firefox
          document.mozCancelFullScreen();
        }else if(document.msExitFullScreen){            //ie
          document.msExitFullScreen();
        }
      }else{
        let element = document.documentElement;
        if(element.requestFullscreen){
          element.requestFullscreen();
        }else if(element.webkitRequestFullScreen){      //safari 、Chrome
          element.webkitRequestFullScreen();
        }else if(element.mozRequestFullScreen){         //firefox
          element.mozRequestFullScreen();
        }else if (element.msRequestFullScreen){         //ie
          element.msRequestFullScreen();
        }
      }
      this.fullscreen = !this.fullscreen;
    },
    handCommand(command){
      if( command=="logoOut"){
        localStorage.removeItem("userName")
        this.$router.push("/")
      }
    }
  }
}
</script>

<style  scoped>
.header{
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  font-size: 22px;
  background-color: #373d41;
}
.collapse-btn{
  float: left;
  margin-left: 22px;
  cursor: pointer;
  line-height: 70px;
  color: #fff;
}
.header .logo{
  position: relative;
  float: left;
  line-height: 70px;
  margin-left: 22px;
  color: #fff;
  font-size: 18px;
}
.header-right{
  float: right;
  padding-right: 50px;
  display: flex;
  height: 70px;
  align-items: center;
}
.btn-fullscreen{
  transform: rotate(45deg);
  margin-right: 5px;
  font-size: 28px;
  color: #fff;
}
.user-avator{
  margin-left: 20px;
}
.user-avator img{
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.username{
  margin-left: 10px;
}
.el-dropdown-link{
  color: #fff;
  cursor: pointer;
}
</style>
